<script setup>
import {ref,watch} from 'vue'

const state=ref({count:1,age:18})
const addState=()=>{
  state.value.count++
}
//监听对象的变化时,新值和旧值是一样的,因为是同一个对象.,所以只需要写一个参数即可
watch(state,(newV,oldV)=>{
  console.log(newV,oldV)
},{
  //deep的用法,布尔值,表示是否深度监听.
  //deep在vue3.5以后,也可以是数字,表示监听的是对象的第几层变化.
  //如果deep是数字,那么监听性能低于true,非必要不使用
deep:true,
})
</script>

<template>
  <div>
state:{{ state.count }}
<button @click="addState">state.count</button>
  </div>
</template>

<style lang="scss" scoped></style>